<template>
  <div class="container">
    <div class="title" v-text="getTitle"></div>
    <div class="divider"></div>
    <div style="margin-top: 10vw"></div>
    <div class="divider"></div>
    <div v-for="(res,index) in products" :key="index">
      <div id="product">
        <img :src="res.pic" style="width: 16vw"/>
        <div class="flex-r" style="flex: 1;margin-right: 20px;margin-left: 10px;align-self: flex-start;align-items: flex-start; position: relative">
          <div class="flex-c" style="align-items: flex-start">
            <span v-text="res.name" class="text"></span>
            <span v-text="res.norm" class="tip"></span>
          </div>
        </div>
      </div>
      <div class="divider"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'item-goods-order',

    data() {
      return {};
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      products: {
        type: Array,
        required: true
      },
      title: {
        type: String,
        required: true
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      }
    },
    computed: {
      getTitle() {
        return this.title;
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      console.log('products', this.products);
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()
    width vw(345)

  .space
    space()

  .container
    background-color white
    height auto
    width vw(345)
    border-radius vw(5)
    font-family: PingFangSC-Regular

  .text
    word-vw(14, first-ash)
    height vw(20)
    line-height vw(20)

  .tip
    word-vw(12, third-ash)
    height vw(17)
    line-height vw(17)
    //margin-top vw(10)
  .count
    word-vw(16px,second-ash)
  .title
    flex-center()
    position absolute
    margin-left vw(10)
    margin-top vw(10)
    height vw(20)
    line-height vw(20)
    word-vw(14, main-color)

  #product
    position relative
    margin vw(10)
    height vw(53)
    flex-x()

</style>
